<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
    <title>Google Maps JavaScript API Example</title>  
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4ZZxnijCQhlZlf57igoGExTwM0brOpm-All5BF6PoaKBxRWWERR0mYEVnCnlZi8Qmoq3uoivZ9cIgQ" 
            type="text/javascript"></script>  
    <script type="text/javascript">  
    //<![CDATA[  
  var map = null;
  var arrowIcon = null;
    function load() {  

      if (GBrowserIsCompatible()) {  

        map = new GMap2(document.getElementById("mapdiv")); 
        map.setCenter(new GLatLng(39.917, 116.397), 7);

        arrowIcon = new GIcon();
        arrowIcon.iconSize = new GSize(24,24);
        arrowIcon.shadowSize = new GSize(1,1);
        arrowIcon.iconAnchor = new GPoint(12,12);
        arrowIcon.infoWindowAnchor = new GPoint(0,0); 
      }
   var point1 = new GLatLng(39.917, 116.397);
  var gmarker = new GMarker(point1);
  map.addOverlay(gmarker);

  var point2 = new GLatLng(38.017, 116.217);
  map.addOverlay(new GMarker(point2));

  var point3 = new GLatLng(38.017, 115.217);
  map.addOverlay(new GMarker(point3));

  var points = [point1,point2,point3];
  //arrowHead(points);
  midArrows(points);
  
 }
     

        function arrowHead(points)
        {
            var p1=points[points.length-1];
            var p2=points[points.length-2];
            var dir = bearing(p2,p1);
            var dir = Math.round(dir/3) * 3;
            while (dir >= 120) {dir -= 120;}

            arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
            map.addOverlay(new GMarker(p1, arrowIcon));
        }


        function midArrows(points)
        {
   			if(points.length < 2) return;

            for (var i=1; i < points.length; i++)
            {
                var p1=points[i-1];
                var p2=points[i];
                var dir = bearing(p1,p2);
                var dir = Math.round(dir/3) * 3;
                while (dir >= 120) {dir -= 120;}

                arrowIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_"+dir+".png";
                map.addOverlay(new GMarker(points[i], arrowIcon));
            }
        }

        var degreesPerRadian = 180.0 / Math.PI;
        function bearing( from, to )
        {
            var lat1 = from.latRadians();
            var lon1 = from.lngRadians();
            var lat2 = to.latRadians();
            var lon2 = to.lngRadians();

            var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
            if ( angle < 0.0 )
                angle += Math.PI * 2.0;
            angle = angle * degreesPerRadian;
            angle = angle.toFixed(1);

            return angle;
        }

    //]]>  
    </script>  
  </head>  
  <body onload="load()" onunload="GUnload()">  
    <div id="mapdiv" style="width: 800px; height: 600px"></div>
  </body>  
</html> 
